<template>
  <div class="container">
    <div class="big-player">
      <van-toast id="van-toast" />
      <div
        class="above"
        @click.stop="sendPlayerFlag"
      >
      </div>
      <div class="player">
        <div class="avator">
          <span><img
              :src="songDetail.img_url"
              :style={animationPlayState:animationPlayState}
            ></span>
        </div>
        <div class="detail">
          <div class="name">{{songDetail.name}}</div>
          <div class="singer">{{songDetail.singer}}</div>
        </div>
        <div class="progress">
          <span class="slider">
            <span class="current-time">{{starttime}}</span>
            <!-- show-value -->
            <slider
              :max="max"
              :value="offset"
              selected-color="#4c9dee"
              @change="sliderChange"
            ></slider>
            <span class="all-time">{{duration}}</span>
          </span>
        </div>
        <div class="operate">
          <span class="size">
            <span class="iconfont icon-fenxiang1 share">
              <button
                @click="shareMusic"
                open-type='share'
                data-song="duration"
              ></button>
            </span>
          </span>
          <span
            class="size quan"
            @click="prevSong"
          >
            <span class="iconfont icon-shangyishou"></span>
          </span>
          <span
            class="size daquan"
            @click="paseMusic"
          >
            <span
              class="iconfont"
              :class="isPause"
            ></span>
          </span>
          <span
            class="size quan"
            @click="nextSong"
          >
            <span class="iconfont icon-xiayishou"></span>
          </span>
          <span class="size">
            <span class="iconfont icon-shoucang"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import store from "../utils/store";
import { TimerToast } from "../utils/utils";
const bgMusic = wx.getBackgroundAudioManager();
export default {
  props: ["playerFlag", "songDetail"],
  data() {
    return {
      max: 100,
      isOpen: false, //播放开关
      starttime: "00:00", //正在播放时长
      duration: "00:00",
      isOpen: false,
      offset: 0,
      animationPlayState: "paused",
      isPause: "icon-bofang",
      currentSongId: 1
    };
  },
  methods: {
    sendPlayerFlag() {
      console.log('点击了');
      //   this.globolData.playerFlag = false;
      this.$emit("playerFlag", false);
    },
    sliderChange(e) {
      // console.log(e.mp.detail.value);
      let offset = parseInt(e.mp.detail.value);
      bgMusic.play();
      bgMusic.seek(offset);
      this.isOpen = true;
      this.currentPosition = offset;
    },
    paseMusic() {
      if (this.isPause == "icon-zanting") {
        this.animationPlayState = "paused";
        this.isPause = "icon-bofang";
        wx.pauseBackgroundAudio();
      } else {
        this.animationPlayState = "running";
        this.isPause = "icon-zanting";
        bgMusic.play();
      }
    },
    nextSong() {
      let nextSong = store.state.musicList[this.currentSongId + 1];
      this.songDetail = nextSong;
      var bgMusic = wx.getBackgroundAudioManager();
      bgMusic.title = nextSong.name;
      bgMusic.singer = nextSong.singer;
      bgMusic.coverImgUrl = nextSong.img_url;
      // 设置了 src 之后会自动播放
      bgMusic.src = nextSong.song_url;
    },
    prevSong() {
      let nextSong = store.state.musicList[this.currentSongId - 1];
      this.songDetail = nextSong;
      var bgMusic = wx.getBackgroundAudioManager();
      bgMusic.title = nextSong.name;
      bgMusic.singer = nextSong.singer;
      bgMusic.coverImgUrl = nextSong.img_url;
      // 设置了 src 之后会自动播放
      bgMusic.src = nextSong.song_url;
    }
  },
  watch: {
    songDetail(newVal, oldVal) {
      store.commit("shareMusicInfo", newVal);
      var that = this;
      if (!newVal) {
        newVal = store.state.currentMusic;
        this.currentSongId = newVal.xuhao;
      }
      if (newVal.song_url != oldVal.song_url) {
        this.isPause = "icon-zanting";
        /*         wx.playBackgroundAudio({
          dataUrl: newVal.song_url,
          title: newVal.name,
          //图片地址地址
          coverImgUrl: newVal.img_url,
          success: function() {
            that.isPause = "icon-zanting";
            that.animationPlayState = "running";
          }
        }); */
        /*         wx.getBackgroundAudioPlayerState({
          success: function(res) {
            if (res.status == 1) {
              console.log(res);
            } else {
              // this.animationDuration = 0;
            }
          }
        }); */
        this.currentSongId = newVal.xuhao;
        bgMusic.title = newVal.name;
        bgMusic.epname = newVal.singer;
        bgMusic.singer = newVal.singer;
        bgMusic.src = newVal.song_url;
        bgMusic.coverImgUrl = newVal.img_url;
        //   console.log(newVal);
        bgMusic.onTimeUpdate(() => {
          //bgMusic.duration总时长  bgMusic.currentTime当前进度
          // console.log(bgMusic.currentTime);
          var duration = bgMusic.duration;
          var offset = bgMusic.currentTime;
          var currentTime = parseInt(bgMusic.currentTime);
          var min = "0" + parseInt(currentTime / 60);
          var max = parseInt(bgMusic.duration);
          var durMin = parseInt(max / 60)
            .toString()
            .padStart(2, 0);
          var durSec = (max - parseInt(durMin) * 60).toString().padStart(2, 0);
          this.duration = `${durMin}:${durSec}`;
          // console.log(durMin, durSec);
          var sec = currentTime % 60;
          if (sec < 10) {
            sec = "0" + sec;
          }
          var starttime = min + ":" + sec; /*  00:00  */
          // console.log(starttime, offset, max);
          this.offset = currentTime;
          this.starttime = starttime;
          this.max = max;
          this.changePlay = true;
        });
        bgMusic.onEnded(() => {
          this.starttime = "00:00";
          this.isOpen = false;
          this.offset = 0;
          // console.log(store.state.musicList[newVal.id]);
          let nextSong = store.state.musicList[newVal.xuhao + 1];
          this.songDetail = nextSong;
          var bgMusic = wx.getBackgroundAudioManager();
          bgMusic.title = nextSong.name;
          bgMusic.singer = nextSong.singer;
          bgMusic.coverImgUrl = nextSong.img_url;
          // 设置了 src 之后会自动播放
          bgMusic.src = nextSong.song_url;
        });
        bgMusic.onStop(() => {
          this.animationPlayState = "paused";
          this.starttime = "00:00";
          this.sendPlayerFlag();
        });
        bgMusic.onPrev(() => {
          let nextSong = store.state.musicList[this.currentSongId - 1];
          this.songDetail = nextSong;
          var bgMusic = wx.getBackgroundAudioManager();
          bgMusic.title = nextSong.name;
          bgMusic.singer = nextSong.singer;
          bgMusic.coverImgUrl = nextSong.img_url;
          // 设置了 src 之后会自动播放
          bgMusic.src = nextSong.song_url;
        });
        bgMusic.onNext(() => {
          let nextSong = store.state.musicList[this.currentSongId + 1];
          this.songDetail = nextSong;
          var bgMusic = wx.getBackgroundAudioManager();
          bgMusic.title = nextSong.name;
          bgMusic.singer = nextSong.singer;
          bgMusic.coverImgUrl = nextSong.img_url;
          // 设置了 src 之后会自动播放
          bgMusic.src = nextSong.song_url;
        });
        bgMusic.onSeeking(() => {
          console.log("onSeeking");
        });
        bgMusic.onPause(() => {
          that.animationPlayState = "paused";
          console.log("onPause");
        });
        bgMusic.onSeeked(() => {
          console.log("onSeeked");
        });
        bgMusic.onError(() => {
          that.animationPlayState = "paused";
          that.currentTime = "00:00";
          that.duration = "00:00";
          TimerToast("مەغلۇپ بولدى", 2000);
          wx.stopBackgroundAudio();
          /*           let nextSong = store.state.musicList[this.currentSongId + 1];
          this.songDetail = nextSong;
          var bgMusic = wx.getBackgroundAudioManager();
          bgMusic.title = nextSong.name;
          bgMusic.singer = nextSong.singer;
          bgMusic.coverImgUrl = nextSong.img_url;
          // 设置了 src 之后会自动播放
          bgMusic.src = nextSong.song_url; */
        });
        bgMusic.onPlay(() => {
          that.animationPlayState = "running";
          // console.log("onPlay");
        });
      }
    }
  },
  mounted() {}
};
</script>
<style <style lang="scss" scoped>
.big-player {
  position: fixed;
  //   border: 1px solid red;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  overflow: hidden;
  .above {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .player {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 550rpx;
    background-color: white;
    border-radius: 30rpx 30rpx 0 0;
    .avator {
      position: relative;
      width: 100%;
      height: 200rpx;
      display: flex;
      justify-content: center;
      margin-top: 30rpx;
      span {
        display: inline-block;
        margin: 0 auto;
        width: 170rpx;
        height: 170rpx;
        background-color: #b2b2b2;
        border-radius: 50%;
        border: 6rpx solid rgb(192, 158, 177);
        overflow: hidden;
        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          animation: music-rotate 8s linear infinite;
        }
      }
    }
    .detail {
      width: 100%;
      height: 80rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .name {
        font-size: 30rpx;
        color: #333;
      }
      .singer {
        margin-top: 6rpx;
        font-size: 22rpx;
        color: #b2b2b2;
      }
    }
    .progress {
      width: 98%;
      margin-top: 20rpx;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 20rpx;
      display: inline-block;
      height: 60rpx;
      position: relative;
      .slider {
        display: block;
        width: 76%;
        margin: 0 auto;
        height: 100%;
        .current-time {
          left: 10rpx;
          position: absolute;
          width: 90rpx;
          display: inline-block;
          color: #b2b2b2;
          font-size: 32rpx;
        }
        .all-time {
          position: absolute;
          right: 0;
          top: 20rpx;
          width: 90rpx;
          display: inline-block;
          color: #b2b2b2;
          font-size: 32rpx;
        }
      }
      //   border: 2rpx saddlebrown solid;
    }
    .operate {
      height: 100rpx;
      width: 94%;
      margin: 0 auto;
      //   border: 1px #333 solid;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .size {
        width: 100rpx;
        height: 100rpx;
        // border: 1px salmon solid;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #e75266;
        .share {
          button {
            visibility: hidden;
          }
        }
        span {
          font-size: 50rpx;
        }
      }
      .quan {
        width: 70rpx;
        height: 70rpx;
        border: 5rpx solid salmon;
        border-radius: 50%;
        box-shadow: 0 0 5rpx 5rpx rgba(150, 150, 150, 0.3);
      }
      .daquan {
        width: 100rpx;
        height: 100rpx;
        border: 5rpx solid salmon;
        border-radius: 50%;
        box-shadow: 0 0 5rpx 5rpx rgba(150, 150, 150, 0.3);
      }
    }
  }
}
@keyframes music-rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
</style>

